<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artist</title>
    <link rel="stylesheet" href="../css/artist.css">
    <link rel="stylesheet" href="../util/iconfont.css">
</head>
<body>
    <div class="wrap">
        <nav>
            <div class="navImg">
                <img src="../../image/Home/我艺整.png" alt="">
            </div>
            <div class="navSearch">
                <input type="search" placeholder="搜索">
                <i class="iconfont icon-sousuo"></i>
            </div>
            <div class="navOption">
                <a href="./index.html">
                    <p>首页</p>
                </a>
                <a href="./art.html">
                    <p>艺术品</p>
                </a>
                <a href="./artist.html">
                    <p>艺术家</p>
                </a>
                <a href="./exhibition.html">
                    <p>展览</p>
                </a>
                <a href="./article.html">
                    <p>文章</p>
                </a>
            </div>
            <div class="navBt">
                <input type="button" value="登录">
                <input type="button" value="注册">
            </div>
        </nav>
        <header>
            <div class="headImg">
                <img src="../../image/Artist/banner.png" alt="">
            </div>
        </header>
        <main>
            <div class="mainArtistMain">
                <div class="redBorder"></div>
                <div class="person">
                    <img src="../../image/Home/皮诺·德埃尼.png" alt="">
                    <div>
                        <div>
                            <p class="personName">皮诺·德埃尼</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div class="introduce">
                    <p>百名画家集结于此，让我们时刻享受艺术的美。
                        使我们更能便捷的欣赏到艺术，且把艺术融入到
                        我们每个人的生活当中去，感受我们的艺术，也
                        时刻了解我们艺术家创作灵感。</p>
                </div>
            </div>
            <hr>
            <div class="selectArtist">
                <div class="recommend">
                    推荐画家
                </div>
                <div class="artist">
                    <div>
                        <div class="artistImg">
                            <img src="../../image/Artist/薛飞.png" alt="">
                        </div>
                        <p>薛飞</p>
                        <div class="symbol">
                            <div class="redBorder"></div>
                        </div>
                    </div>
                    <div>
                        <div class="artistImg">
                            <img src="../../image/Artist/六席兹.png" alt="">
                        </div>
                        <p>薛飞</p>
                        <div class="symbol">
                            <div class="redBorder"></div>
                        </div>
                    </div>
                    <div>
                        <div class="artistImg">
                            <img src="../../image/Artist/人物1.png" alt="">
                        </div>
                        <p>薛飞</p>
                        <div class="symbol">
                            <div class="redBorder"></div>
                        </div>
                    </div>
                    <div>
                        <div class="artistImg">
                            <img src="../../image/Artist/人物2.png" alt="">
                        </div>
                        <p>薛飞</p>
                        <div class="symbol">
                            <div class="redBorder"></div>
                        </div>
                    </div>
                    <div>
                        <div class="artistImg">
                            <img src="../../image/Artist/人物3.png" alt="">
                        </div>
                        <p>薛飞</p>
                        <div class="symbol">
                            <div class="redBorder"></div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="screen">
                <div>
                    <p>年代 : </p>
                    <ul>
                        <li>上世纪30-40年代 </li>
                        <li>上世纪60-70年代</li>
                        <li>世纪80-90年代 </li>
                        <li class="more">更多</li>
                    </ul>
                </div>
                <div>
                    <p>类别 ：</p>
                    <ul>
                        <li>油画</li>
                        <li>水墨</li>
                        <li>版画</li>
                        <li>雕塑 </li>
                        <li>水彩</li>
                        <li>陶艺</li>
                        <li>摄影</li>
                        <li class="more">更多</li>
                    </ul>
                </div>
                <div>
                    <p>国家 ：</p>
                    <ul>
                        <li>中国</li>
                        <li>中国</li>
                        <li>河南</li>
                        <li>法国</li>
                        <li>意大利</li>
                        <li>挪威</li>
                        <li class="more">更多</li>
                    </ul>
                </div>
            </div>
            <div class="mainArtistFt">
                <div>
                    <img src="../../image/Artist/李戬.png" alt="">
                    <div>
                        <div>
                            <p class="personName">李戬</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div>
                    <img src="../../image/Artist/张效仿.png" alt="">
                    <div>
                        <div>
                            <p class="personName">皮诺·德埃尼</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div>
                    <img src="../../image/Artist/张文超.png" alt="">
                    <div>
                        <div>
                            <p class="personName">皮诺·德埃尼</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div>
                    <img src="../../image/Artist/张玲.png" alt="">
                    <div>
                        <div>
                            <p class="personName">张玲</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div>
                    <img src="../../image/Artist/杨帆水彩.png" alt="">
                    <div>
                        <div>
                            <p class="personName">杨帆</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
                <div>
                    <img src="../../image/Artist/温蒂.png" alt="">
                    <div>
                        <div>
                            <p class="personName">温蒂</p>
                            <input type="button" value="+关注">
                        </div>
                        <p>发表过<span>122</span>件艺术品</p>
                        <p><span>1300</span>位圈内人关注</p>
                    </div>
                </div>
            </div>
            <div class="mainFooter">
                <div>
                    <div class="loading">
                        <img src="../../image/art/加载中.png" alt="">
                        <p>加载中</p>
                    </div>
                    <div class="on">
                        <img src="../../image/Home/《.png" alt="">
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="footerHd">
                <p>客服中心  |  专家顾问  |  法律政策  |  关于我们  |  企业服务  |  中文  |  English</p>
            </div>
            <div class="footerFt">
                <p>我们在这：北京市小店区平阳路122号  电话：010-12345678邮箱：957894748@126.com</p>
                <div class="QR">
                    <img src="../../image/Home/二维码.png" alt="">
                </div>
            </div>
        </footer>
    </div>
    <script>
        let lis = document.querySelectorAll('li');
        console.log(lis)
        for (let i = 0; i < lis.length-1; i++) {
            lis[i].onclick = function () {
                for (let i = 0; i < lis.length-1; i++) {
                    lis[i].classList.remove('borderSelected');
                }
		        this.classList.add('borderSelected');
            }
        }
    </script>
</body>
</html>